<template>
    <div class="modal" :class="{ 'is-active': showOptions }">
        <div class="modal-background"></div>
        <div class="modal-card wider">
            <header class="modal-card-head">
                <p class="modal-card-title">设置</p>
            </header>
            <section class="modal-card-body">
                <div class="columns">
                    <div class="column">背景色</div>
                </div>
                <div class="columns">
                    <div class="column is-three-quarters">
                        <color-range color="red" :initiate="red" @color-changed="colorChanges" />
                        <color-range color="green" :initiate="green" @color-changed="colorChanges" />
                        <color-range color="blue" :initiate="blue" @color-changed="colorChanges" />
                    </div>
                    <div class="column is-flex push-right">
                        <div class="color-block" :style="{ 'background': colorPickBlock }"></div>
                    </div>
                </div>
                <div class="columns">
                    <div class="column is-7">图片展示时长</div>
                    <div class="column">
                        <div class="field has-addons">
                            <p class="control">
                                <input type="number" class="input has-text-right" v-model="showTime">
                            </p>
                            <p class="control">
                                <a class="button is-static">毫秒</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="columns">
                    <div class="column is-three-quarters">乱序播放</div>
                    <div class="column has-text-right">
                        <check-switch :initiate="shuffle" @switch-changed="changeSwitch" />
                    </div>
                </div>
                <div class="columns">
                    <div class="column is-7">解锁方式</div>
                    <div class="column has-text-right">
                        <div class="control is-expanded">
                            <div class="select is-fullwidth">
                                <select v-model="unlockType">
                                    <option value="slide">滑动解锁</option>
                                    <option value="pin">PIN码解锁</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <footer class="modal-card-foot push-right shrink">
                <button class="button" @click.stop="save">保存</button>
                <button class="button" @click.stop="cancel">取消</button>
            </footer>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.wider {
    width: 50%;
}

.push-right {
    justify-content: flex-end;
}

.shrink {
    padding: 10px;
}

.color-block {
    width: 72px;
    height: 72px;
}
</style>

<script>
import { remote } from 'electron';
import { mapState, mapGetters, mapActions } from 'vuex';
import _ from 'lodash';
import ColorRange from '@/components/ColorRange';
import CheckSwitch from '@/components/CheckSwitch';

export default {
    components: { ColorRange, CheckSwitch },
    data() {
        return {
            showTime: 0,
            selRed: 0,
            selGreen: 0,
            selBlue: 0,
            playShuffled: false,
            unlockType: 'slide'
        }
    },
    mounted() {
        this.showTime = this.$store.state.App.show;
        this.selRed = this.$store.state.App.background_red;
        this.selGreen = this.$store.state.App.background_green;
        this.selBlue = this.$store.state.App.background_blue;
        this.playShuffled = this.$store.state.App.shuffle;
        this.unlockType = this.$store.state.App.lockType;
    },
    computed: {
        ...mapState({
            showOptions: state => state.App.showOptions,
            red: state => state.App.background_red,
            green: state => state.App.background_green,
            blue: state => state.App.background_blue,
            shuffle: state => state.App.shuffle,
            lockType: state => state.App.lockType,
            show: state => state.App.show
        }),
        colorPickBlock() {
            return `rgb(${this.selRed}, ${this.selGreen}, ${this.selBlue})`;
        }
    },
    watch: {
        show(newValue) {
            this.showTime = newValue;
        },
        lockType(newValue) {
            this.unlockType = newValue;
        }
    },
    methods: {
        colorChanges(arg) {
            switch (arg.type) {
                case 'red':
                    this.selRed = arg.value;
                    break;
                case 'green':
                    this.selGreen = arg.value;
                    break;
                case 'blue':
                    this.selBlue = arg.value;
                    break;
            }
        },
        changeSwitch(arg) {
            this.playShuffled = arg;
        },
        save() {
            this.$store.dispatch('saveConfig', {
                background: {
                    red: this.selRed,
                    green: this.selGreen,
                    blue: this.selBlue
                },
                show: this.showTime,
                shuffle: this.playShuffled,
                lock: this.unlockType
            });
        },
        cancel() {
            this.$store.dispatch('closeOptions');
        }
    }
}
</script>
